<template>
  <el-dialog v-model="dialog.visible" title="审核失败" width="55%" @close="handleCloseDialog">
    <el-card shadow="never" class="table-card">
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="150px"
        class="form mb-0"
      >
        <el-form-item label="驳回原因" prop="remark">
          <el-input v-model="formData.remark" type="textarea" :rows="4" maxlength="200" />
        </el-form-item>
      </el-form>
    </el-card>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="handleCloseDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
const emit = defineEmits(["update:modelValue", "submit"]);
const dialog = reactive({
  title: "",
  visible: false,
});
const formRef = ref();
const status = ref();

const defaultFormData = {
  remark: "",
};
const formData = ref({
  ...defaultFormData,
});
const formRules = reactive({
  remark: [{ required: true, message: "驳回原因不能为空", trigger: "blur" }],
});

async function handleSubmit() {
  const validate = await formRef.value.validate();
  if (!validate) return;
  dialog.visible = false;
  console.log(formData.value, "formData");
  emit("submit", formData.value, status.value);
}

// 关闭弹窗
function handleCloseDialog() {
  dialog.visible = false;
  formData.value = {};
  Object.assign(formData.value, defaultFormData);
  emit("update:modelValue", false); // 关闭弹窗
}

function showModal(val, st) {
  dialog.visible = true;
  status.value = st;
  Object.assign(formData.value, defaultFormData, val);
}

defineExpose({
  showModal,
});
</script>
<style style="scss" scoped>
.map-container {
  width: 100%;
  height: 400px;
}
</style>
